<template>
  <!--  查询输入信息栏-->
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="商家名称">
      <el-input v-model="formInline.user" placeholder="请输入商家名"></el-input>
    </el-form-item>
    <el-form-item label="商家ID">
      <el-input v-model="formInline.id" placeholder="请输入商家ID"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="findShop">查询</el-button>
    </el-form-item>
  </el-form>

  <el-table :data="findShopData" style="width: 100%" max-height="100%" border stripe>
    <el-table-column fixed prop="id" label="商家ID" min-width="50px"/>
    <el-table-column label="商家主图" min-width="70px">
      <template v-slot={row}>
        <el-image style="width: 40px; height: 40px; margin-left:10px;"
                  :src=" 'http://localhost:8888/' + row.img "
        ></el-image>
      </template>
    </el-table-column>
    <el-table-column prop="name" label="商家名称" min-width="180"/>
    <el-table-column prop="shopTypeNum" label="商家类型" min-width="70"/>
    <el-table-column prop="description" label="商家描述" min-width="180"/>
    <el-table-column prop="minDeliveryRate" label="商家起送费" fit/>
    <el-table-column prop="shippingPrice" label="商家配送费" fit/>
    <el-table-column label="店铺分" min-width="150">
      <template v-slot={row}>
        <el-rate
            v-model="row.score"
            disabled = true
            show-score
            text-color="#ff9900"
            score-template="{value}"
        >
        </el-rate>
      </template>
    </el-table-column>
    <el-table-column prop="monthSell" label="商家月售" fit/>
    <el-table-column prop="address" label="商家地址" min-width="180"/>
    <el-table-column type="Date" prop="createDate" label="创建日期" min-width="120"/>
    <el-table-column prop="state" label="商家状态" fit/>
  </el-table>


  <div id="page">
    <el-pagination
        background
        :page-size="pageSize"
        :pager-count="11"
        layout="prev, pager, next"
        :total="totalCount"
        @current-change="loadShop"
        v-model:current-page="CurrentPage"
    >
    </el-pagination>
  </div>
</template>

<script>
import qs from "qs";
import request from "../../http/request";

export default {
  name: "FindShopInfo",
  data() {
    return {
      CurrentPage: 1,
      pageSize: 8,
      totalCount: 0,
      findShopData: [],
      formInline: {
        user: '',
        id: '',
      },
    }
  },
  methods: {
    findShop() {
      console.log('submit!')
    },
    rowClassName({row, rowIndex}) {
      //把每一行的索引放进row
      row.index = rowIndex;
    },
    loadShop: function (callback) {
      let param = qs.stringify({
        pageNo: this.CurrentPage,
        pageSize: this.pageSize,
      })
      request({
        url: "/shop/list?" + param,
        method: "get",
      }).then((data) => {
        if (data.code === 200){
          this.totalCount = data.data.total;
          data = data.data.list.map((item) => {
            let date = new Date(item.createDate);
            item.createDate = date.getFullYear()+"年"+date.getMonth()+"月"+date.getDate()+"日";
            item.score = item.score/10;
            return item;
          });
          this.findShopData = data;
          if (callback != null) {
            callback();
          }
        }else {
          alert(data.msg);
        }
      })
    },
  },
  mounted: function () {
    this.loadShop();
  }
}
</script>


<style scoped>
.demo-form-inline {
  line-height: 0;
  text-align: left;
}
</style>